<template>
  <div class="index-wrapper">
    <div class="index-title"><img src="/static/images/title.png"></div>
    <div class="index-head">
      <div class="index-avatar"><img :src="userInfo.headimgurl"></div>
      <p>{{userInfo.nickname}}</p>
      <a href="javascript:;" class="exit-btn" @click="exit">退出登录</a>
    </div>
    <div class="index-content">
      <ul>
        <li v-for="(item,index) in ability" :key="index">
          <router-link :to="item.href">
            <div><img :src="item.icon"></div>
            <h3>{{item.title}}</h3>
            <p v-if="item.num >= 0">{{item.num}}</p>
          </router-link>
        </li>
        <li v-if="userInfo.teamRatio>0">
          <a href="javascript:;"><div><img src="/static/images/earth.png"></div><h3>昨日大区分成</h3><p>{{yesterdayNum | fixed}}</p></a>
        </li>
        <!--<li v-if="userInfo.teamRatio>0">-->
          <!--<a href="javascript:;"><div><img src="/static/images/chart.png"></div><h3>整线总业绩</h3><p>0</p></a>-->
        <!--</li>-->
        <!--<li v-if="userInfo.teamRatio>0">-->
          <!--<a href="javascript:;"><div><img src="/static/images/user.png"></div><h3>授权大区代理</h3></a>-->
        <!--</li>-->
        <li v-for="large in agent"  v-if="userInfo.teamRatio>0">
          <router-link :to="large.href">
            <div><img :src="large.icon"></div>
            <h3>{{large.title}}</h3>
            <p v-if="large.num >= 0">{{large.num | fixed}}</p>
          </router-link>
        </li>
        <li v-if="userInfo.teamRatio>0">
          <a href="javascript:;"><div><img src="/static/images/earth.png"></div><h3>实时大区分成</h3><p>{{todayNum | fixed}}</p></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
      data(){
          return{
            userInfo:{},
            avatar:'/static/images/timg.jpg',
            yesterdayNum:'',
            todayNum:'',
            ability:[
              {icon:'/static/images/code.png',title:'二维码',num:-1,href:'/code'},
              {icon:'/static/images/extend.png',title:'提推广费',num:-1,href:'/balance'},
              {icon:'/static/images/teahouse.png',title:'我的茶楼人数',num:0,href:'/lower'},
              {icon:'/static/images/scan.png',title:'今日新增扫码',num:0,href:'/scan'},
              {icon:'/static/images/extendNum.png',title:'今日推广',num:0,href:'/today'}
              // {icon:'/static/images/friends.png',title:'赠送亲友',num:-1,href:'/code'},
            ],
            agent:[
              // {icon:'/static/images/earth.png',title:'昨日大区',num:10.25,href:'/today'},
              {icon:'/static/images/chart.png',title:'整线总业绩',num:0,href:'/bus'},
              {icon:'/static/images/user.png',title:'授权大区代理',num:-1,href:'/accredit'}
            ]
          }
      },
      created(){
          this.getUserInfo()
          this.getNum()
      },
      methods:{
        getNum(){
          this.$axios.get('/dashboard',{},this.global().token).then((res)=>{
            if(res.status == 200){
              this.agent[0].num = res.data.teamAllIncomeAmount;
              this.ability[2].num = res.data.subUserCount;
              this.ability[3].num = res.data.todaySubUserCount;
              this.ability[4].num = parseFloat(res.data.threeLevelIncomeAmount).toFixed(2);
              this.yesterdayNum = res.data.yesterdayTeamIncomeAmount;
              this.todayNum = res.data.teamIncomeAmount
            }
          })
        },
        getUserInfo(){
            this.$axios.get('/profiles',{},this.global().token).then((res)=>{
              if(res.status == 200){
                let user = new Object()
                let data = res.data
                data.forEach((val)=>{
                  let str = "user."+val.key+"='"+val.value+"'";
                  eval(str);
                  sessionStorage.setItem(val.key,val.value)
                })
                if(!user.headimgurl){
                  user.headimgurl = this.avatar
                }
                this.userInfo = user
              }
            })
          },
        exit(){
          if (confirm("您确定要退出登录吗？")){
            this.$router.push({path:'/login'})
            // var userAgent = navigator.userAgent;
            // if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") !=-1) {
            //   window.location.href="about:blank";
            // } else {
            //   window.opener = null;
            //   window.open("", "_self");
            //   window.close();
            // }
          }else{}
        }
      }
    }
</script>

<style scoped lang="stylus">
.index-wrapper
  .index-title
    width: 1rem
    padding:.1rem 0
    margin:0 auto
    &>img
      width: 100%
  .index-head
    background: url("/static/images/index-bg.png") no-repeat
    background-size 100% 100%
    padding:.1rem 0 .15rem
    .index-avatar
      width:.6rem
      height:.6rem
      margin:0 auto
      &>img
        width:100%
        border-radius 50%
    &>p
      font-size:.14rem
      color: #ffffff
      line-height:.3rem
      text-align center
      margin-bottom .1rem
    .exit-btn
      display block
      margin:0 auto
      width:.75rem
      line-height:.2rem
      font-size .14rem
      color:#fff
      border-radius: .05rem
      border:.01rem solid #fff
      text-align center

  .index-content
    &>ul
      display flex
      flex-wrap:wrap
      padding-top:.3rem
      padding-left:.12rem
      &>li
        flex 0 0 1.1rem
        border-radius:.05rem
        margin-right:.1rem
        box-shadow  0 0 .1rem #aaa
        margin-bottom .2rem
        height:1.1rem
        &>a
          display block
          width:100%
          height:100%
          &>div
            width:.5rem
            padding:.1rem
            height:.5rem
            margin:0 auto
            &>img
              width:100%
          &>h3
            font-size:.14rem
            text-align center
            color:#333333
          &>p
            text-align center
            color:#0571de
            font-size:.14rem

</style>
